<template>
  <svg class="v-icon" aria-hidden="true" :style="iconStyle">
    <use :xlink:href="`#${icon}`" />
  </svg>
</template>

<script lang="ts">
import { computed, defineProps, defineComponent } from "vue";

export default defineComponent({
  props: {
    color: {
        type: String,
        default: "currentColor",
      },
      width: {
        type: String,
        default: "1em",
      },
      height: {
        type: String,
        default: "1em",
      },
      icon: {
        type: String,
        default: "icon-xinxi3",
      },
      styles: {
        type: Object,
        default: () => ({})
      }
  },
  setup(props) {
    const iconStyle = computed(() => {
      const styles: any = {};
      styles.fill = props.color;
      styles.width = props.width;
      styles.height = props.height;
      if (Object.keys(props.styles).length > 0) {
        for (let key in props.styles) {
          if (props.styles.hasOwnProperty(key)) {
            styles[key] = props.styles[key];
          }
        }
      }
      return styles;
    });
    return {
      iconStyle,
    }
  }
})

</script>
